
<template>
  <div class="demo-inner-divider">基础分页 - 少量页面</div>
  <div class="demo-inner-desc">适用于页数≤5时，用于切换任意层级的内容。</div>
  <div style="margin-bottom: 20px">
    <e-page
      :show-total="false"
      :show-sizer="false"
      :show-elevator="false"
      :total="50"
      v-model:current="current"
      @on-prev="onPrev"
      @on-next="onNext"
    />
  </div>

  <div class="demo-inner-divider">基础分页 - 大量页面</div>
  <div class="demo-inner-desc">适用于页数>5时，用于切换任意层级的内容。</div>
  <div style="margin-bottom: 20px">
    <e-page
      :show-total="false"
      :show-sizer="false"
      transfer
      :show-elevator="false"
      :total="70"
    ></e-page>
  </div>

  <div class="demo-inner-divider">分页尺寸</div>
  <div class="demo-inner-desc">
    数字输入框分为：小、大两种尺寸，高度分别为：24px/28px。默认为尺寸「大」，小分页适合内嵌在其他组件中分页导航使用。可在不同场景及不同业务需求选择适合尺寸。
  </div>
  <div style="margin-bottom: 20px">
    <e-page
      :show-total="false"
      :show-sizer="false"
      :show-elevator="false"
      :total="50"
      v-model:current="current"
      @on-prev="onPrev"
      @on-next="onNext"
    />
  </div>
  <div style="margin-bottom: 20px">
    <e-page
      :show-total="false"
      :show-sizer="false"
      :show-elevator="false"
      :total="50"
      size="small"
      v-model:current="current"
      @on-prev="onPrev"
      @on-next="onNext"
    />
  </div>

  <div class="demo-inner-divider">极简分页符</div>
  <div class="demo-inner-desc">
    极度简单的翻页控件，只展示当前页、总页数及上下翻页。模块内的横向空间较少，并且无需精准定位具体页面的场景。
  </div>
  <div style="margin-bottom: 20px">
    <e-page
      simple
      transfer
      :current="1"
      :total="50"
    ></e-page>
  </div>

  <div class="demo-inner-divider">带数据总量显示/快速跳转的分页</div>
  <div class="demo-inner-desc">
    适用于页数较多时，用于切换任意层级的内容，并且提供数据总量展示/快捷跳转功能。
  </div>
  <div style="margin-bottom: 200px">
    <e-page
      show-total
      show-sizer
      transfer
      show-elevator
      :total="500"
    />
  </div>

  <div class="demo-inner-divider">以前的</div>
  <e-page
    :current="1"
    :total="100"
    :pageSize="10"
    transfer
    :pageSizeOpts="[10,20,50]"
    @on-change="onChange"
    @on-page-size-change="onPageSizeChange"
  ></e-page>
  <div style="margin:20px 0;"><p>当前页码：<b>{{current}}</b></p><p>当前每页显示数目：<b>{{pageSizeParam}}</b></p></div>
  
  <e-page
    :current="1"
    :total="100"
    v-model:pageSize="pageSize"
    :pageSizeOpts="[10,20,50]"
  ></e-page>
  <div>pageSize双向绑定: {{ pageSize }}</div>
  <div class="demo-inner-divider"></div>
  <br/>

  <e-page
    :current="1"
    :total="100"
    :pageSize="10"
    :pageSizeOpts="[10,20,50]"
    size="small"
  ></e-page>

  <page-md class="markdown-body"></page-md>

</template>

<script setup>
import pageMd from '../../docs/page.md';
import {ref} from 'vue'

// 当前页码

let current = ref(1)
let pageSizeParam = ref(10)
const pageSize = ref(10)


function onChange(page){
  current.value = page;
}

function onPageSizeChange(pageSize){
  pageSizeParam.value = pageSize
}
const onPrev=(index)=>{
  console.log('prev',index)
}
const onNext=(index)=>{
  console.log("next",index)
}
</script>

<style scoped>

</style>
